// 该文件专门应用于创建整个应用的路由器
import VueRouter from "vue-router"
// 引入组件
import MyHome from '@/pages/MyHome'
import MyAbout from '@/pages/MyAbout'
import MyMessage from '@/pages/MyMessage'
import MyNews from '@/pages/MyNews'
import MyDetail from '@/pages/MyDetail'
// 创建一个路由器
const router = new VueRouter({
  routes: [
    {
      name: 'guanyu',
      path: '/MyAbout',
      component: MyAbout,
      meta: { title: '关于' }
    },
    {
      meta: { title: '主页' },
      path: '/MyHome',
      component: MyHome,
      children: [
        {
          meta: { isAuth: true, title: '消息' },
          path: 'MyMessage',
          component: MyMessage,
          children: [
            {
              meta: { title: '详情' },
              name: 'xiangqing',
              path: 'MyDetail',
              component: MyDetail,
              // props的第一种写法，值为对象，该对象中的所有key-value都会以props的形式给MyDetail组件
              // props: { a: 1, b: 'hello' }

              // props的第二种写法，值为布尔值，若布尔值为真，就会把该路由组件收到所有props参数，以props的形式传给MyDetail组件
              // props: true

              // props的第三种写法，值为函数
              props ($route) {
                return {
                  id: $route.query.id,
                  title: $route.query.title
                }
              }
            }
          ]
        },
        {
          meta: { isAuth: true, title: '新闻' },
          path: 'MyNews',
          component: MyNews
        },
      ]
    },
  ]
})

// 全局前置路由守卫——————初始化的时候调用、每次路由切换之前调用
router.beforeEach((to, from, next) => {
  console.log('全局前置路由守卫', to, from);
  if (to.meta.isAuth) {
    if (localStorage.getItem('name') == '最爱喝兽奶') {
      next()
    } else {
      alert('名字不对，没有权限访问！！！')
    }
  } else {
    next()
  }
})

// 全局后置路由守卫——————初始化的时候调用、每次路由切换之后调用
router.afterEach((to, from) => {
  console.log('局后置路由守卫', to, from);
  document.title = to.meta.title || '最爱喝兽奶'
})
export default router